<template>
  <!-- 轮播图组件开始 -->
  <div class="container pt-30 wow fadeInUp animated">
    <div class="featured-slider-3 position-relative">
      <div class="slider-3-arrow-cover"></div>
      <el-carousel
        :interval="interval"
        @change="change"
        arrow="never"
        class="featured-slider-3-items hover-up transition-normal"
      >
        <el-carousel-item
          v-for="(item, index) in imgList"
          :key="item.id"
          class="slider-single overflow-hidden border-radius-10"
        >
          <div class="post-thumb position-relative">
            <div
              class="thumb-overlay position-relative"
              :style="`background-image: url(${item.url})`"
            >
              <div class="post-content-overlay">
                <div class="container">
                  <div class="entry-meta meta-0 font-small mb-20">
                    <!-- <a href="category.html" tabindex="0"
                      ><span class="post-cat text-info text-uppercase"
                        >生活方式</span
                      ></a
                    >
                    <a href="category.html" tabindex="0"
                      ><span class="post-cat text-warning text-uppercase"
                        >目的地</span
                      ></a
                    > -->
                  </div>
                  <h1 class="post-title mb-20 font-weight-900">
                    <!-- 添加用于打字效果的span -->
                    <a class="text-white" href="single.html" tabindex="0">
                      <span class="typing-text text-white">{{
                        item.typingTitle
                      }}</span>
                      <span class="typing-cursor">|</span>
                    </a>
                  </h1>
                  <div
                    class="entry-meta meta-1 font-small text-white mt-10 pr-5 pl-5"
                  >
                    <!-- <span class="post-on">2020年9月15日</span>
                    <span class="hit-count has-dot">23k 浏览量</span> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
  <!-- 轮播图组件结束 -->
</template>

<script>
export default {
  name: "MyCarousel",
  data() {
    return {
      interval: 7000, // 轮播间隔时间，单位毫秒
      imgList: [

      ],
      typingInterval: null, // 用于跟踪打字效果的定时器
      cursorInterval: null, // 用于光标闪烁的定时器
      currentCarouselIndex: 0, // 用于跟踪当前轮播图索引
    };
  },
  computed: {},
  methods: {
    startTypingEffect(index) {
      const typingTextElement = document.querySelectorAll(".typing-text")[index];
      const originalText = this.imgList[index].title;
      let currentIndex = 0;
      this.typingInterval = setInterval(() => {
        if (currentIndex <= originalText.length) {
          this.imgList[index].typingTitle = originalText.slice(0, currentIndex);
          currentIndex++;
        } else {
          clearInterval(this.typingInterval);
        }
      }, 200); // 调整打字速度，单位是毫秒
    },
    change(index) {
      // 清除之前轮播图的打字效果定时器和光标闪烁定时器
      clearInterval(this.typingInterval);
      clearInterval(this.cursorInterval);

      // 重置当前轮播图的打字效果文本为空字符串
      this.imgList[this.currentCarouselIndex].typingTitle = "";

      // 设置当前轮播图索引
      this.currentCarouselIndex = index;

      // 延迟启动打字效果
      setTimeout(() => {
        this.startTypingEffect(index);

        // 添加定时器，用于控制光标的闪烁
        this.cursorInterval = setInterval(() => {
          this.$nextTick(() => {
            const cursorElement =
              document.querySelectorAll(".typing-cursor")[index];
            if (cursorElement) {
              cursorElement.style.opacity =
                cursorElement.style.opacity === "0" ? "1" : "0";
            }
          });
        }, 600); // 调整光标闪烁速度，单位是毫秒
      }, 2000); // 延迟等待时间
    },
    getCarouselList() {
      const siteConfig = sessionStorage.getItem("siteConfigKey");
      if (siteConfig) {
        // 如果有数据，则解析JSON数据并赋值给carouselList
        const carouselList = JSON.parse(siteConfig).site.site.siteConfig.carouselList
        if(carouselList)
        {
        this.imgList = carouselList.map(item => ({
        id: item.id,
        url: item.photoUrl,
        title: item.photoDesc || "",
        typingTitle: "",
        titleJson: JSON.stringify([item.photoDesc]),
        }));
        }
      }else{
        this.$message({
          type:'error',
          message:'获取网站轮播图失败'
        }
        )
      }
    },
  },
   mounted() {
    this.getCarouselList();
    // 当组件加载时为第一项启动打字效果和光标闪烁
    this.startTypingEffect(0);
    this.cursorInterval = setInterval(() => {
      this.$nextTick(() => {
        const cursorElement = document.querySelectorAll(".typing-cursor")[0];
        if (cursorElement) {
          cursorElement.style.opacity =
            cursorElement.style.opacity === "0" ? "1" : "0";
        }
      });
    }, 600); // 调整光标闪烁速度，单位是毫秒
  },
  //销毁定时器
  beforeDestroy() {
    // 清除定时器，以确保在组件销毁时释放资源
    clearInterval(this.typingInterval);
    clearInterval(this.cursorInterval);
  },
};
</script>

<style scoped>
/deep/.el-carousel__container {
  height: 600px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 添加用于打字动画的样式 */
.typing-text {
  overflow: hidden;
  white-space: normal;
}

/* 光标闪烁动画 */
.typing-cursor {
  display: inline-block;
  opacity: 1;
  animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
  from,
  to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
</style>
